<template>
  <div>
    <!-- 修改资金密码 -->
    <nut-form
      label-position="top"
      :rules="rules"
      ref="routineRef"
      :model-value="routineFormData"
    >
      <nut-form-item
        :label="t('home_page_oldPassword')"
        prop="old_password"
        :required="false"
      >
        <nut-input
          v-model="routineFormData.old_password"
          :placeholder="t('home_page_enterOldPassword')"
          :type="eyeOpen1 ? 'text' : 'password'"
          @input="handleNumInput('old_password')"
          clearable
        >
          <template #right>
            <iconpark-icon
              @click="eyeOpen1 = !eyeOpen1"
              color="#A8A8CA"
              :icon-id="eyeOpen1 ? 'show' : 'hide'"
              size="1.3rem"
              class="mr-12"
            ></iconpark-icon>
          </template>
        </nut-input>
      </nut-form-item>
      <nut-form-item :label="t('home_page_newPassword')" prop="new_password">
        <nut-input
          v-model="routineFormData.new_password"
          :placeholder="t('home_page_enterNewPassword')"
          :type="eyeOpen2 ? 'text' : 'password'"
          @input="handleNumInput('new_password')"
          clearable
        >
          <template #right>
            <iconpark-icon
              @click="eyeOpen2 = !eyeOpen2"
              color="#A8A8CA"
              :icon-id="eyeOpen2 ? 'show' : 'hide'"
              size="1.3rem"
              class="mr-12"
            ></iconpark-icon>
          </template>
        </nut-input>
      </nut-form-item>
      <nut-form-item
        :label="t('home_page_enterAgainNewPassword')"
        prop="new_password_confirm"
      >
        <nut-input
          v-model="routineFormData.new_password_confirm"
          :placeholder="t('home_page_enterAgainNewPassword')"
          :type="eyeOpen3 ? 'text' : 'password'"
          @input="handleNumInput('new_password_confirm')"
          clearable
        >
          <template #right>
            <iconpark-icon
              @click="eyeOpen3 = !eyeOpen3"
              color="#A8A8CA"
              :icon-id="eyeOpen3 ? 'show' : 'hide'"
              size="1.3rem"
              class="mr-12"
            ></iconpark-icon>
          </template>
        </nut-input>
      </nut-form-item>
    </nut-form>
    <div>
      <nut-button class="submit" @click="submit">{{ t("home_page_bind") }}</nut-button>
    </div>
  </div>
</template>
<script setup lang="ts">
import commonHooks from "../../commonHooks";
import H5Websocket from "@/net/Net1";
import { NetPacket } from "@/netBase/NetPacket";
import { useI18n } from "vue-i18n";
import { WithdrawValidator, againWithdrawValidator } from "../../validator";
import { ref } from "vue";
const { t } = useI18n();

const { routineFormData, routineRef, roleInfo } = commonHooks();
const eyeOpen1 = ref(false);
const eyeOpen2 = ref(false);
const eyeOpen3 = ref(false);

const rules = {
  old_password: [{ validator: WithdrawValidator }],
  new_password: [{ validator: WithdrawValidator }],
  new_password_confirm: [
    {
      validator: (val: any) => {
        return againWithdrawValidator(val, routineFormData.value.new_password);
      },
    },
  ],
};

const handleNumInput = (val: any) => {
  routineFormData.value[val] = routineFormData.value[val].replace(/[^\d]/g, "");
};

const submit = () => {
  routineRef.value?.validate().then(({ valid, errors }: any) => {
    if (valid) {
      const query = NetPacket.req_bind_or_modify_withdraw_password();
      query.new_password = routineFormData.value.new_password;
      query.old_password = routineFormData.value.old_password;
      query.new_password_confirm = routineFormData.value.new_password_confirm;
      query.operate_type = 2;
      query.step = 0;
      query.role_id = roleInfo.value?.id;
      H5Websocket.sendMessageHandler(query);
    } else {
      console.warn("error:", errors);
    }
  });
};
</script>
